<template>
	<view class="main-content">
		<index-header></index-header>
		<view class="content">
			<view class="search_line">
				<image  style="width: 20upx;height: 20upx;" src="../../static/img/location.png"></image>
				<span>盐城市</span>	
				<view class="aui-search" @click="jump()">
					<image style="width: 20upx;height: 20upx;margin: 20upx;" src="../../static/img/search_icon.png"></image>
					<input type="text" placeholder="搜索更多活动" />
				</view>
			</view>
		
		 <ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
		    @onSelected='onSelected' @dateChange='dateChange'></ren-dropdown-filter>
		<!-- 列表部分 -->
		<view class="act_lists">
			<ul>
				
				<li v-for="i in 8" :key="i">
					<navigator  url='/pages/activity/detail'>
					<view class="act_t">
					<view class="img">
						<image src="../../static/img/home/banner.png" mode=""></image>
						<span class="on">进行中</span>
					</view>
					<view class="act_info">
						<p>“AECORE杯”数字孪生应用大赛</p>
						<p><image style="width: 30upx;height: 30upx;margin-right: 10upx;" src="../../static/img/time.png"></image>
					</image>2020.11.26-2021.04.30</p>
						<p>
						<image style="width: 30upx;height: 30upx;float: left;top: 10upx;margin-right: 10upx;" src="../../static/img/location.png"></image>
						
						
						<span>免费</span>
						<span style="font-size: 22upx;color: #777;margin-top: 24upx;">
						线上活动
						</span></p>
					</view>
					</view>
					<view class="textline">
						
					</view>
					<view class="type textline-1">
						<span>竞赛活动</span>
						<span>智慧城市</span>
						<span>GIS</span>
					</view>
					</navigator>
				</li>
				
			</ul>
		</view>
		
		</view>
		<view-tabbar :current="1"></view-tabbar>
		
	</view>
</template>

<script>
	import Tabbar from '@/components/bottomNav.vue'
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	    export default {
	        components:{
				 'view-tabbar': Tabbar,
	            RenDropdownFilter
	        },
	        data() {
	            return {
	                filterData:[
                        [{ text: '时间', value: '',type: 1 }, { text: '全部', value: 1 }, { text: '今天', value: 2 }, { text: '明天', value: 3 },{ text: '本周', value: 4 },{ text: '本月', value: 5 },{ text: '本年', value: 6 },{ text: '明年及以后', value: 7 },{ text: '已结束', value: 8 }],
                        [{ text: '综合排序', value: '',type: 1 }, { text: '最多浏览', value: 1 }, { text: '最多收藏', value: 2 }, { text: '最多分享', value: 3 }, { text: '最新发布', value: 4 }],
                        [{ text: '价格', value: '',type: 1 }, { text: '全部', value: 1 }, { text: '免费', value: 2 }, { text: '收费', value: 3 }],
                        [
                            { text: '活动类别', value: '',type: 2 }, 
                            { text: '举办方式', 
                                value: 1,
                                type:2,
                                list:[{
                                    name:'全部',
                                    value:1
                                },{
                                    name:'线上',
                                    value:2
                                },{
                                    name:'线下',
                                    value:3
                                }]
                            }, 
                            { text: '关键词', value: 2,type:2,
                                list:[{
                                    name:'GIS',
                                    value:1
                                },{
                                    name:'测绘',
                                    value:2
                                },{
                                    name:'遥感',
                                    value:3
                                },{
                                    name:'导航',
                                    value:4
                                },{
                                    name:'地球科学',
                                    value:5
                                },{
                                    name:'无人机',
                                    value:6
                                }] }, 
                            { text: '活动类别', value: 3,type:2,
                            list:[{
                                name:'应用',
                                value:1
                            },{
                                name:'技术',
                                value:2
                            },{
                                name:'展览',
                                value:3
                            }]},
                        ],
					],
	                defaultIndex:[0,0,0,0]
	            }
	        },
	        onLoad() {
	
	        },
	        methods: {
	            onSelected(res){
	                console.log(res)
	            },
	            dateChange(d){
	               uni.showToast({
	                   icon:'none',
	                   title:d
	               })
	            },
						jump(){
							uni.navigateTo({
							    url:"/pages/search/search"
							})
						}
	        }
	    }
</script>

<style lang="scss">
	/* @import "../../common/comm_nohead.css"; */
	.content {
	    width: 750upx;
	    height: auto;
	    padding-top: 108upx;
		min-height: calc(100% - 631upx);
	}
	.search_line{
		padding: 30upx;
		position: relative;
		height: 60upx;
		line-height: 30px;
	}
	input{
		font-size: 18upx;
		color: black;
		line-height: 28upx;;
		height: 100%;
		// position: absolute;
		left: 20upx;
		font-size: 20upx;
	}
	.aui-search {
	    background-color: #F4F4F4;
	    width: 75%;
	    height: 60upx;
		line-height: 60upx;
		display: inline-flex;
		margin-left: 40upx;
		float: right;
		
	}
	// .act_lists{
	// // margin-top: 120upx;
	// padding: 20upx;
	
	// }
	.act_lists ul{
		padding-inline-start: 0!important;
	}
	.act_lists li{
		border-bottom: 16upx solid #e7ebf6;
		list-style: none;
		height: 290upx;
		// margin-bottom: 100upx;
	}
	.act_lists .img{
		width: 40%;
		float: left;
		// padding: 20upx;
		
	}
	.act_info{
		width:55%;
		float:right
	}
	.act_info p:nth-child(1){
		font-size: 24upx;
	}
	.act_info p:nth-child(2){
		font-size: 22upx;
		color: #777;
		margin-top: 24upx;
	}
	.act_info span:nth-child(1){
		font-size: 22upx;
		color: #777;
		float: left;
		// display: ;
	}
	.act_info span:nth-child(2){
		font-size: 22upx;
		color: #1296db;
		float: right;
	}
	.act_lists .img>image{
		width: 100%;
		height: 150upx;
	}
	.type {
	    margin: 20upx;
		// margin-top: 20upx;   
	}
	.textline-1 {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
	.textline-1 span {
		color:  #1296db;
		border-radius: 5upx;
		font-size: 14upx;
		border: 2upx solid #1296db;
		padding: 6upx;
		margin: 0 4upx ;
	}
	.textline{
		border: 1upx solid #f5f6f9;
		margin: 0 10px;
	}
	.act_t{
		height: 160upx;
		padding: 20upx;
	}
	.img{
		position: relative;
	}
	.img span{
		    position: absolute;
		    background: rgba(170, 170, 170, 0.5);
		    color: #fff;
		    display: inline-block;
		    left: 0;
		    top: 0;
		    padding: 2px 5px;
		    font-size: 12px;
	}
	.img span.on{
		    background: rgba(1, 131, 255, 0.8);
	}
	ul{
		padding-bottom: 120upx;
	}
</style>
